<template>
  <div class="left-three-body">
    <div class="pictorialContent" ref="pictorialContent" style="width:480px;height:260px"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        useNum: [{CDC:6052},{RDC1:15886}], //已用库位
        totalNum: [{CDC:9356},{RDC1:20197}], //总库位
      }
    },
    mounted () {
      this.setPieOption();
    },
    // props: {
    //     leftThreeUseNum: {
    //         type: Array,
    //         default: () => []
    //     },
    //     leftThreeTotalNum: {
    //         type: Array,
    //         default: () => []
    //     },
    // },
    // watch: {
    //     leftThreeUseNum(newValue, oldValue) {
    //       this.useNum = newValue
    //     },
    //     leftThreeTotalNum(newValue, oldValue) {
    //       this.totalNum = newValue
    //       this.setPieOption();
    //     }
    // },
    methods: {
      setPieOption() {
        const myChartDom = this.$refs.pictorialContent
        let myChart = this.$echarts.init(myChartDom)
        // var category= [{
        //       name: "CDC",
        //       value: 612.5
        //   },
        //   {
        //       name: "RDC1",
        //       value: 548.7
        //   },
        //   {
        //       name: "RDC2",
        //       value: 300.2
        //   },
        // ]; // 类别
        var total = 1000
        var totalCDC = 0; // CDC数据总数
        var totalRDC1 = 0; // RDC1数据总数
        var totalRDC2 = 0; // RDC2数据总数
        const totalArrayData = [{name: 'CDC',value: 0},{name: 'RDC1',value: 0},{name: 'RDC2',value: 0}] // 类别
        totalArrayData.forEach((item) => {
          this.totalNum.forEach((items) => {
            if(items[item.name]) {
              item.value = items[item.name]
            }
          })
        })

        totalCDC = totalArrayData[0].value || 0
        totalRDC1 = totalArrayData[1].value || 0
        totalRDC2 = totalArrayData[2].value || 0


        const useArrayData = [{name: 'CDC',value: 0},{name: 'RDC1',value: 0},{name: 'RDC2',value: 0}] // 类别

        useArrayData.forEach((item) => {
          this.useNum.forEach((items) => {
            if(items[item.name] && item.name === 'CDC') {
              item.value = (items[item.name] * 1000 / totalCDC).toFixed(1)
            } else if(items[item.name] && item.name === 'RDC1') {
              item.value = (items[item.name] * 1000 / totalRDC1).toFixed(1)
            } else if(items[item.name] && item.name === 'RDC2') {
              item.value = (items[item.name] * 1000 / totalRDC2).toFixed(1)
            }
          })
        })
        
        var datas = [];
        useArrayData.forEach(value => {
            datas.push(value.value);
        });
        var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            xAxis: {
                // data: ['总库位'+totalCDC+'个', '总库位'+totalRDC1+'个', '总库位'+totalRDC2+'个'],
                data: [{value:'Total No. of Bin',textStyle:{fontFamily: 'fzpshj',fontSize:12} },{value:'Total No. of Bin',textStyle:{fontFamily: 'fzpshj',fontSize:12}},{value:'Total No. of Bin',textStyle:{fontFamily: 'fzpshj',fontSize:12}}],
                offset: 15,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    // color: function (value, index, o) {
                    //     var colorListr = [
                    //         '#45BCFF',
                    //         '#00FFF5',
                    //         '#B664FF'
                    //     ];
                    //     return colorListr[index];
                    //     /*return colorListr[params.dataIndex]*/
                    // },
                    color: '#B3E2FF',
                    fontSize: 12
                }
            },
            // grid: {
            //     left: 250,
            //     top: 100, // 设置条形图的边距
            //     right: 250,
            //     bottom: 100
            // },
            yAxis: [{
                // type: "category",
                // inverse: false,
                // data: category,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },

            }],
            series: [
                {
                    // 内
                    type: "bar",
                    barWidth: 31,
                    silent: true,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorListr = [
                                    '#45BCFF',
                                    '#00FFF5',
                                    '#B664FF'
                                ];
                                return colorListr[params.dataIndex]
                            }
                        }
                    },
                    label: {
                        normal: {
                            // formatter: "{b}",
                            formatter: (params) => {
                              if(params.data.name === 'CDC') params.data.value = totalCDC
                              if(params.data.name === 'RDC1') params.data.value = totalRDC1
                              if(params.data.name === 'RDC2') params.data.value = totalRDC2
                              return `${params.data.name} ${params.data.value}`
                            },
                            textStyle: {
                                color: "#B3E2FF",
                                fontSize: 14
                            },
                            position: 'bottom',
                            // distance: 20, // 向右偏移位置
                            show: true
                        }
                    },
                    data: useArrayData,
                    z: 1,
                    animationEasing: "elasticOut"
                },

                {
                    // 分隔
                    type: "pictorialBar",
                    itemStyle: {
                        normal: {
                            color: "#07314a" // 这是背景的颜色
                        }
                    },
                    
                    symbolRepeat: "fixed",
                    symbolMargin: 2,
                    symbol: "rect",
                    symbolClip: true,
                    symbolSize: [32, 2],
                    symbolPosition: "start",
                    symbolOffset: [-3, 4],
                    symbolBoundingData: this.total,
                    data: [total, total, total],
                    // data: [totalCDC, totalRDC1, totalRDC2],
                    z: 2,
                    animationEasing: "elasticOut",
                },
                {
                  // label
                  type: "pictorialBar",
                  symbolBoundingData: total,
                  itemStyle: {
                    normal: {
                      color: "none"
                    }
                  },
                  label: {
                    normal: {
                      formatter: (params) => {
                          var text;
                          text = '{f| ' + (params.data * 100 / total).toFixed(2) + '%}';
                          return text;
                      },
                      rich: {
                          f: {
                              color: "#B3E2FF"
                          }
                      },
                      position: 'top',
                      distance: 10, // 向右偏移位置
                      show: true
                    }
                  },
                  data: datas,
                  z: 0,

                },

                {
                    name: "外框",
                    type: "bar",
                    barGap: "-130%", // 设置外框粗细
                    data: [total, total, total],
                    // data: [totalCDC, totalRDC1, totalRDC2],
                    barWidth: 45,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [5, 5, 5, 5],
                            color: "transparent", // 填充色
                            barBorderColor: "#1588D1", // 边框色
                            barBorderWidth: 0, // 边框宽度
                        }
                    },
                    z: 0
                },
                //  {
                //     type: 'scatter',
                //     name: '条形',
                //     symbol: 'roundRect',
                //     symbolSize: [17,2],
                //     symbolOffset: [-3, 5],
                //     symbolKeepAspect: true,
                //     itemStyle: {
                //         normal: {
                //             color: "#1588D1"
                //         }
                //     },
                //     data: [total, total, total],
                // }

            ]
        }
        myChart.setOption(option)
      }
    },
  }
</script>

<style lang="scss" scoped>
.left-three-body{
  width: 480px;
  height: 260px;
  // @include background-url(left-3,png);
  // margin-bottom: 14px;
  margin: 50px auto;
}
</style>